<template>
  <div class="HeaderSetting-container">
    <el-dropdown @command="handleCommand" trigger="click">
      <span class="el-dropdown-link">
        系统设置<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          :command="item.command"
          v-for="item in dropdownMenuList"
          :key="item.id"
          >{{ item.command }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script lang="ts">
import cookies from "@/utils/cookies";
import { nanoid } from "nanoid";
import { Component, Vue } from "vue-property-decorator";
export interface DropdownMenuList {
  id: string;
  command: string;
  method: string;
}

@Component({
  name: "HeaderSetting",
  components: {},
})
//为dropdownMenuList数据声明一个DropdownMenuList类型声明
export default class HeaderSetting extends Vue {
  //给dropdownMenuList添加DropdownMenuList声明
  public dropdownMenuList: DropdownMenuList[] = [
    {
      id: nanoid(),
      command: "个人信息",
      method: "logout",
    },
    {
      id: nanoid(),
      command: "退出",
      method: "logout",
    },
  ];

  handleCommand(command: string) {
    const item = this.dropdownMenuList.find((item) => item.command === command);
    item && item?.method && (this as any)[item.method]();
  }
  //退出登录
  logout() {
    this.$router.push("/");
    cookies.removeToken();
  }
}
</script>

<style lang="scss" scoped>
.HeaderSetting-container {
  padding: 10px 20px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}
</style>
